<template>
  <div class="home">
     <video src="~@/assets/home/bg-video.mp4" autoplay muted class="bg"></video>
    <div class="logo">
      <a-row>
        <a-col :span="4"> </a-col>
        <a-col :span="16">
          <div class="logo-title"></div>
        </a-col>
        <a-col :span="4"> </a-col>
      </a-row>
    </div>
    <div class="content">
      <a-row>
        <a-col :span="8">
          <!--  @click="onHandle('仿生工程师')" -->
          <a-card hoverable @click="onHandle('算法库')" class="home-card">
            <img src="~@/assets/home/t-12.png" alt="logo" style="margin-top: 10px; height: 55px" />
            <div style="color: #fff; font-size: 18px; margin-top: 10px">算法库</div>
          </a-card>
          <a-card hoverable @click="onHandle('AI仿生助理')" class="home-card" style="margin-top: 14px">
            <img src="~@/assets/home/t-13.png" alt="logo" style="margin-top: 10px" />
            <div style="color: #fff; font-size: 18px; margin-top: 10px">AI仿生助理</div>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card hoverable @click="onHandle('报告查询')" class="home-card">
            <img src="~@/assets/home/t-4.png" alt="logo" style="margin-top: 40px" />
            <div style="color: #fff; font-size: 18px; margin-top: 10px">算法报告</div>
          </a-card>
          <a-row>
            <a-col :span="12">
              <a-card hoverable style="height: 110px; margin-top: 10px" @click="onHandle('日报采样分析')" class="home-card">
                <div style="height: 46px">
                  <img src="~@/assets/home/mnfx.png" alt="logo" style="height: 46px" />
                </div>
                <div style="color: #fff; font-size: 18px">日报采样分析</div>
              </a-card>
            </a-col>
            <a-col :span="12">
              <a-card style="height: 110px; margin-top: 10px" hoverable @click="onHandle('AI预测分析')" class="home-card">
                <div style="height: 46px">
                  <img src="~@/assets/home/ycfx.png" alt="logo"  style="height: 46px"/>
                </div>
                <div style="color: #fff; font-size: 18px">AI预测分析</div>
              </a-card>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="8"> 
          <a-card hoverable @click="onHandle('集成驾驶舱')" class="home-card">
            <img src="~@/assets/home/t-10.png" alt="logo" style="margin-top: 10px; height: 55px" />
            <div style="color: #fff; font-size: 18px; margin-top: 10px">集成驾驶舱</div>
          </a-card>
          <a-card hoverable @click="onHandle('后台管理系统')" class="home-card" style="margin-top: 14px">
            <!-- <img src="~@/assets/home/t-3.png" alt="logo" style="margin-top: 10px;"> -->
            <img src="~@/assets/home/t-9.png" alt="logo" style="margin-top: 10px" />
            <div style="color: #fff; font-size: 18px; margin-top: 13px">后台管理系统</div>
          </a-card>
        </a-col>
      </a-row>
      <!-- <a-row>
        <a-col :span="12">
          <a-card hoverable @click="onHandle('系统监控')" class="home-card">
            <div style="height: 66px;">
              <img src="~@/assets/home/t-9.png" alt="logo" style="margin-top: 10px;">
            </div>
            <div style="color: #fff; font-size: 18px;margin-top: 10px;">
                系统监控
            </div>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card hoverable @click="onHandle('帮助文档')" class="home-card">
            <div style="height: 66px;">
              <img src="~@/assets/home/t-11.png" alt="logo" style="margin-top: 10px;">
            </div>
            <div style="color: #fff; font-size: 18px;margin-top: 10px;">
              帮助文档
            </div>
          </a-card>
        </a-col>
      </a-row> -->
      <!-- <div class="aiLink" @click="openAiLink">仿生助理</div> -->
    </div>
    <ai-index ref="aiModal"></ai-index> 
       <ai-index ref="aiModal"></ai-index> 
       <user-formula ref="userFormulaModal"></user-formula>  
       <user-reports ref="userReportsModal"></user-reports>  
       <!-- <simulation-assay ref="simulationAssayModal"></simulation-assay> -->
       <slotDayFull ref="slotDayFullModal"/>
       <predict ref="predictModal"></predict>
  </div>
</template>

<script>
import aiIndex from '@/views/corp/assistant/Index_new'
import userFormula from '@/views/corp/home/userFormula'
import userReports from '@/views/corp/home/userReports'
// import simulationAssay from '@/views/corp/home/simulationAssay'
import slotDayFull from '@/views/corp/home/slotDayFull'

import predict from '@/views/corp/home/predict'
import {filterDictTextByCache} from '@/components/dict/JDictSelectUtil'

export default {
  name: 'Home',
  components: {
    aiIndex,
    userFormula,
    userReports,
    // simulationAssay,
    predict,
    slotDayFull
  },
  data() {
    return {
      jscUrl:'',
      isVideoLoaded: false
    }
  },
  created() {
    this.jscUrl = filterDictTextByCache('open_url', 'jsc_url')
  },
  methods: {
    openAiLink() {
      this.$refs.aiModal.show();
    }, 
    onHandle(title) {
      if(title =='AI仿生助理'){
           this.$refs.aiModal.show();
           return
      }
       if(title =='算法库'){
           this.$refs.userFormulaModal.show();
           return
      }
       if(title =='报告查询'){
           this.$refs.userReportsModal.show();
           return
      }
       if(title =='日报采样分析'){
           this.$refs.slotDayFullModal.show();
           return
      }
      if(title =='AI预测分析'){
           this.$refs.predictModal.show();
           return
      }
       
      var pathUrl = '/dashboard/analysis'
      switch (title) {
        case '系统管理':
          pathUrl = '/isystem/user'
          break
        case '仿生工程师':
          pathUrl = '/corp/userFormula/userFormulaList'
          break
        case '系统监控':
          pathUrl = '/isystem/online'
          break
        case '大数据分析':
          pathUrl = '/corp/hadoop/resample'
          break
        case '帮助文档':
          pathUrl = '/document/index'
          break
        case '生产现场监控':
          pathUrl = '/siteMonitoring/index'
          break

        default:
          break
      }
      if (title == 'API平台') {
        window.open('http://192.168.3.102:8080/zhongfu', '_blank')
        return
      }
      if (title == '集成驾驶舱') {
        //window.open("http://192.168.3.102:8080/zhongfu/bigscreen/index.html",'_blank');
        window.open(this.jscUrl, '_blank')
        return
      }
      if (title == '生产现场监控') {
        //this.$message.success('开发中...');
        return
      }
      this.$store.commit('SET_CURRENT_MODEL', title)
      this.$router.push({ path: pathUrl })
      // this.$router.push({ path: "/dashboard/analysis" }).catch(() => {
      //   // console.log('登录跳转首页出错,这个错误从哪里来的')
      // })
    }, 
  },
}
</script>

<style scoped>
.home {
  width: 100%;
  /* min-height: 960px; */
  background: #f0f2f5 url(~@/assets/bg.jpg) no-repeat center center;
  background-size: 100% 100%;
  padding: 6% 0;
  position: relative;
  overflow: hidden;
}

.home > .logo {
  width: 100%;
  margin: 0 auto;
  position: absolute;
  padding: 10px 295px;
  height: 15%;
}

.logo-title {
  background: url(~@/assets/logo-1.png) no-repeat center center;
  background-size: contain;
  position: absolute;
  padding: 0px;
  width: 100%;
  height: 100%;
  min-height: 126px;
}

.home > .content {
  width: 100%;
  height: 510px;
  margin-top: 9%;
  padding: 1% 15%;
  border: 0px;
  text-align: center;
}

.ant-card-body {
  padding: 12px;
}

.home-card {
  backdrop-filter: blur(1px) saturate(1.2);
  -webkit-backdrop-filter: blur(1px) saturate(1.2);
  background-color: rgba(255, 255, 255, 0.2);
  border: 0px;
  border-radius: 6px;
  margin: 6px;
}
.home-card:hover { 
  backdrop-filter: blur(1px) saturate(1.3);
  -webkit-backdrop-filter: blur(1px) saturate(1.4);;
  background-color: rgba(255, 255, 255, 0.3);
  border: 0px;
  border-radius: 6px;
  margin: 6px;
} 
.aiLink {
  border: 1px solid #ccc;
  width: 2.4vw;
  color: #f0f2f5;
  font-size: 0.8vw;
  position: absolute;
  right: 105px;
  bottom: 91px;
  border-radius: 50%;
  cursor: pointer;
}
.aiLink:hover{
  border: 2px solid #ccc;
  font-size: 0.85vw;
  width: 2.7vw;
}

video.bg {
  position: fixed;
  /* 视频绝对定位 */
  top: 0;
  left: 0;
  width: 100%;
  /* 宽度占据整个屏幕 */
  height: 100%;
  /* 高度占据整个屏幕 */
  object-fit: fill;
  /* 填满整个容器，可能会裁剪视频 */
}

.bg {
  width: 100%;
  height: 100%;
}
</style>